@content1: content1;
@content2: content2;
.@{content1}-wrapper {
  background-color: #eee;
  .@{content1} {
    .content1-text{
      display: flex;
      flex-direction: column;
    //   overflow: hidden;
    //   .content1-content{
    //     display: -webkit-box;
    // -webkit-box-orient: vertical;
    // -webkit-line-clamp: 5;
    //   }
    }
  overflow: hidden;
    max-width: 100%;
    height: 100%;
    padding: 0;
    &-img {
      height: 100%;
      transform-origin: top;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        display: block;
        img {
          display: block;
          transition: filter .5s;
        }
        img:hover{
          filter:brightness(50%);
        }
      }
    }
    img {
      display: block;
      transition: filter .5s;
    }
    img:hover{
      filter:brightness(50%);
    }
    &-text {
      padding: 20px 40px 0 220px;
      height: 100%;
      .@{content1}-content {
        margin-top: 10px;
        line-height: 1.8;
        font-family: 宋体;
        font-style: 14px;
        color: #707070;
        margin-top: 20px;
      }
      .hvr-ripple-out::before{
        border: #e60011 solid 1px;
      }
      .button{
    //     position: absolute;
    // bottom: -18%;
    // right: 3%;
    margin-top: 5px;
    float:right;
    min-width: 100px;
        display: block;
        cursor: pointer;
        color: #e60011;
        width: 25%;
        height: 40px;
        line-height: 34px;
        border: 1px solid #e60011;;
        text-align: center;
        font-size: 15px;
      }
      .@{content1}-content,.@{content1}-title {
        // position: relative !important;
      }
      // .@{content1}-title {
      //   font-size: 20px;
      //   font-weight: 600;
      //   color: #404040;
      //   // margin-top: 120px;
      // }
      .tag{
        font-size: 20px;
        font-weight: 600;
        color: #404040;
      }
      .engTag{
        font-size: 16px;
        border-bottom: 1px solid red;
        padding-bottom: 8px;
      }
      .content {
        line-height: 1.8;
        font-family: 宋体;
        font-style: 14px;
        color: #707070;
        margin-top: 20px;
      }
    }
  }
  .content2-text{
    display: flex;
    padding: 20px 0 0 40px;
    height: 100%;
    .@{content1}-title{
      min-width: 80px
    }
    .tag{
      font-size: 20px;
      font-weight: 600;
      color: #404040;
    }
    .engTag{
      font-size: 16px;
      border-bottom: 1px solid red;
      padding-bottom: 8px;
    }
    .content1-content {
      display: flex;
    flex-direction: row-reverse;
    }
    .@{content1}-content{
      width: 88%;
      img{
        width: 110%;
        transition: transform, 0.4s linear 0s;
        overflow: none;
      }
      img:hover{
        transform: scale(1.1);
        transition: transform 0.4s linear  0s;
      }
      .desc{
        margin-top: 10px;
        line-height: 1.8;
        font-family: 宋体;
        font-style: 14px;
        color: #707070;
        margin-top: 20px;
        // min-width: none;
        width: 46%;
        position: absolute;
    left: -15%;
    top: 100%;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .@{content1}-wrapper {
    height: 600px;
    .@{content1} {
      &-img {
        height: 200px;
        padding: 0;
        text-align: center;
        margin-top: 64px;
        span {
          display: inline-block;
          width: 180px;
          height: 200px;
          line-height: 200px;
          margin: auto;
        }
      }
      &-text {
        height: auto;
        margin-bottom: 20px;
        text-align: center;
        padding: 0;
        .@{content1}-content,
        .@{content1}-title {
          width: 100%;
          top: auto;
        }
        .@{content1}-title {
          margin: 32px auto 16px;
          font-size: 24px;
        }
      }
    }
  }
}
